import React, { useEffect, useState } from 'react'
import { getShop } from '../../../api/yjr/yjr_api'
import ProductCard2 from './ProductCard2';
import ProductCard1 from './ProductCard1';

interface TabData {
    _id: string,
    title: string
}

export default React.memo(function Tabs({ item }: { item: TabData }) {
    // 定义一个接口ShopData，用于描述商店数据的结构
    interface ShopData {
        _id: string, // 商店的唯一标识符
        title: string, // 商店标题
        integral: number, // 商店积分
        image: string, // 商店图片URL
        detail_image: string, // 商店详情图片URL
        like: number, // 商店点赞数
        follow: number, // 商店关注数
        shop_type: string // 商店类型
        freight: number, // 商店运费
    }

    const [shop, setShop] = useState<ShopData[]>([])
    const getShopData = async () => {
        const res = await getShop()
        setShop(res.data.shopData)
    }

    useEffect(() => {
        getShopData()
    }, [])
    return (
        <div>
            {
                item._id === '67ac3b84c4cce6aa6311bd6e' ?
                    shop.map(text => {
                        return (
                            <ProductCard1 text={text} key={text._id} />
                        )
                    }) :
                    shop.filter(ele => ele.shop_type == item._id).map((content: ShopData) => {
                        return (
                            <ProductCard2 content={content} key={content._id} />
                        )
                    })
            }
        </div>
    )
})
